<!--  -->
<template>
  <div class>
    <div class="content">
      <div v-for="(item, index) in arr" :key="index" :class="item.type">
        <span>{{ item.value }}</span>
      </div>
    </div>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      arr: [
        {
          type: "ask",
          value: "sdgdsgsdfh",
        },
      ],
      type: "ask",
      scrollDistance: 0,
    };
  },
  computed: {},
  watch: {},
  methods: {
    add() {
      this.type == "ask" ? (this.type = "answer") : (this.type = "ask");
      this.arr[this.arr.length - 1].value = "zheshiyigeanswerlalalal";
      let num1 = Math.random() * 10000;
      let num2 = Math.random() * 60000;
      this.arr = [
        ...this.arr,
        {
          value: num1,
          type: "ask",
        },
        {
          value: num2,
          type: "answer",
        },
      ];
      this.last();
    },
    last() {
      // this.$nextTick(() => {
      // document.querySelector(".content").scrollTop = document.querySelector(
      //   ".content"
      // ).scrollHeight;
      // });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {
    // let nodes = document.querySelectorAll("span");
    // let node = nodes[nodes.length - 1];
    // node.scrollIntoView({
    //   block: "end",
    //   behavior: "smooth",
    // });

    let node = document.querySelector(".content");
    this.scrollDistance = node.scrollHeight - node.clientHeight;
    let moveDistance;
    let scrollToBottomAnimation = () => {
      node.scrollBy({
        top: moveDistance,
        left: 0,
        behavior: "smooth",
      });
    };
    if (this.scrollDistance > 0) {
      moveDistance = this.scrollDistance - node.scrollTop;
      scrollToBottomAnimation();
    }
  },
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.content {
  float: left;
  width: 70%;
  /* background-color: #ccc;
  opacity: 0.6; */
  height: 400px;
  overflow: auto;
  border: 1px solid #ccc;
}
.content > div span {
  display: inline-block;
  height: 60px;
  word-break: break-all;
  border: 1px solid #000;
  width: 50%;
  margin-top: 10px;
}
.ask {
  text-align: left;
}
.answer {
  text-align: right;
  height: 80px;
}
</style>